package com.example.myapplication.ui.screens


import android.hardware.camera2.params.MeteringRectangle
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.myapplication.R
import com.google.accompanist.insets.statusBarsPadding
import androidx.compose.material.icons.filled.Star
import androidx.compose.runtime.*
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.module.webview.WebView
import com.example.module.webview.rememberWebViewState
import com.example.myapplication.ViewModel.ArticleViewModel
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ArticleDetailScreen(articleModel: ArticleViewModel = viewModel(), onBack: () -> Unit) {

    val webViewState = rememberWebViewState(data = articleModel.content)

    var fontScale by remember {
        mutableStateOf(1.0f)
    }

    val scaffoldState = rememberBottomSheetScaffoldState()

    val coroutineScope = rememberCoroutineScope()

    // 弹出框
    // sheetPeekHeight 底部露出高度(方便上划)
    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        text = "文章详情",
                        color = Color.White,
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center,
                        fontSize = 18.sp
                    )
                },
                navigationIcon = {
                    Icon(
                        imageVector = Icons.Default.Close,
                        contentDescription = null,
                        modifier = Modifier
                            .clickable {
                                onBack()
                            }
                            .padding(8.dp))
                },
                actions = {
                    Icon(imageVector = Icons.Default.Star,
                        contentDescription = null,
                        modifier = Modifier
                            .clickable {
                                // 弹窗关闭函数为挂起函数需要使用launch
                                coroutineScope.launch {
                                    // 判断弹窗状态
                                    if (scaffoldState.bottomSheetState.isCollapsed) {
                                        // 关闭
                                        scaffoldState.bottomSheetState.expand()
                                    } else {
                                        // 打开
                                        scaffoldState.bottomSheetState.collapse()
                                    }
                                }
                            }
                            .padding(8.dp))
                })
        },
        modifier = Modifier
            .background(MaterialTheme.colors.primary)
            .statusBarsPadding(),
        sheetContent = {
            Column(modifier = Modifier.padding(15.dp).padding(bottom = 0.dp)) {
                Text(text = "字体大小", fontSize = 16.sp)
                // Slider 滑块
                Slider(
                    value = fontScale,
                    onValueChange = {
                        fontScale = it
                        webViewState.evaluateJavascript("document.body.style.zoom = $it")
                    },
                    steps = 2,
                    valueRange = 0.75f..1.5f
                )
            }
            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth().padding(horizontal = 15.dp)
            ) {
                Text(text = "较小", fontSize = 14.sp, color = Color(0xff999999)) // 0.75
                Text(text = "标准", fontSize = 14.sp, color = Color(0xff999999)) // 1.0
                Text(text = "超大", fontSize = 14.sp, color = Color(0xff999999)) // 1.25
                Text(text = "特大", fontSize = 14.sp, color = Color(0xff999999)) // 1.5
            }
            Spacer(modifier = Modifier.height(20.dp))
        },
        sheetPeekHeight = 0.dp
    ) {
        WebView(webViewState)
    }
}
